<!-- 新增/编辑数据字典 -->
<template>
  <Dialogdrawerdefect :ddtvisible.sync="visible" size="505px" @close="handleCancel" :title="curStatus === pageStatus.edit ? '编辑数据':'新建数据'">
    <div class="col-right" v-loading="loading">
      <el-form inline class="rule-form" ref="form" :model="ruleForm" :rules="rules">
        <el-form-item label="数据类型:" prop="hospitalName" class="short-input">
          <el-select size="small" class="param-type_input" v-model="ruleForm.level" placeholder="请选择">
            <el-option
              v-for="(item,index) in levelOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上级数据:" prop="parentId" class="short-input" v-if="ruleForm.level===2">
          <el-select size="small" class="param-type_input" v-model="ruleForm.parentId" placeholder="请选择">
            <el-option
              v-for="(item,index) in dictionaryOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <div v-else style="width: 200px;"></div>
        <el-form-item label="数据名称:" prop="name" class="short-input">
          <el-input size="small" v-model="ruleForm.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="字典CODE:" prop="code" class="short-input">
          <el-input size="small" v-model="ruleForm.code" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="医院:" prop="dep" class="short-input">
          <el-select size="small" class="param-type_input" filterable v-model="ruleForm.hospitalCode" placeholder="请选择">
            <el-option
              v-for="(item,index) in mx_hospitalList"
              :key="index"
              :label="item.name"
              :value="item.code"
              @change="handleChange('hospital')"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="影像区域:" prop="depArea" class="short-input">
          <el-select size="small" class="param-type_input" v-model="ruleForm.depArea" placeholder="请选择" collapse-tags @change="handleChange('depArea')">
            <el-option
              v-for="(item,index) in depAreaOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查部门:" prop="dep" class="short-input">
          <el-select size="small" class="param-type_input" v-model="ruleForm.dep" placeholder="请选择" collapse-tags @change="handleChange('dep')">
            <el-option
              v-for="(item,index) in depOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查设备:" prop="modality" class="short-input">
          <el-select size="small" class="param-type_input" v-model="ruleForm.modality" placeholder="请选择" collapse-tags>
            <el-option
              v-for="(item,index) in modalityOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="子数据:" prop="childrenList" class="children-form" v-if="ruleForm.level === 1">
          <div class="child-list">
            <div class="child-title">
              <span style="margin-left: 10px;">子数据名称:</span>
              <span style="margin-left: 130px;">子数据CODE:</span>
            </div>
            <div v-for="(item,index) in ruleForm.childrenList" :key="index" class="one-child">
              <el-input size="small" v-model="item.name" placeholder="请输入"></el-input>
              <el-input size="small" v-model="item.code" placeholder="请输入"></el-input>
              <i class="el-icon-circle-close child-icon cursor" @click="deleteChild(index)"></i>
            </div>
            <span class="blue-text child-title cursor" style="margin-left: 10px;" @click="addChildren"><i class="el-icon-plus icon"></i>添加子数据</span>
          </div>
        </el-form-item>
        <div class="buttons">
          <div class="right-buttons">
            <el-button class="floatR m-l-1" type="primary" size="small" @click="handleConfirm">确定</el-button>
            <el-button class="floatR" size="small" @click="handleClose">取消</el-button>
          </div>
        </div>
      </el-form>
    </div>
  </Dialogdrawerdefect>
</template>

<script>
import { getDepAreaList, getDepList, getModalityList, getItemList, getCheckGroupList, addCheckroom, editCheckroom, deleteCheckroom } from '@/api/api.js'
import Dialogdrawerdefect from '@/components/dialogbox/dialogDrawerDefect'
import { PageStatus } from '@/utils/constant'
export default {
  name: '',
  mixins: [],
  components: { Dialogdrawerdefect },
  props: {
    showRight: {
      Boolean,
      default: false
    },
    curStatus: {
      Object,
      default: {}
    },
    rowData: {
      Object,
      default: () => {}
    },
    hospitalCode: {
      String,
      default: ''
    }
  },
  data() {
    return {
      pageStatus: PageStatus,
      ruleForm: {
        hospitalCode: this.$store.state.user.hospitalCode,
        level: 1,
        depArea: '',
        dep: '',
        modality: '',
        childrenList: [
          {
            name: '',
            code: ''
          }
        ]
      },
      rules: {
        depArea: { required: true, message: '请选择影像区域', trigger: 'blur' },
        department: { required: true, message: '请选择执行科室', trigger: 'blur' },
        dep: { required: true, message: '请选择检查部门', trigger: 'blur' },
        modality: { required: true, message: '请选择设备名称', trigger: 'blur' },
        checkGroup: { required: true, message: '请选择机房分组', trigger: 'blur' },
        checkRoom: [
          { required: true, message: '请输入机房名称', trigger: 'blur' }
        ],
        checkRoomState: { required: true, message: '请选择机房状态', trigger: 'blur' }
      },
      visible: false,
      depAreaOptions: [],
      depOptions: [],
      modalityOptions: [],
      groupOptions: [],
      departmentOptions: [],
      modalityAddressOptions: [],
      dictionaryOptions: [],
      levelOptions: [
        {
          value: 1,
          label: '一级'
        },
        {
          value: 2,
          label: '二级'
        }
      ],
      loading: false,
      statusOptions: [
        {
          label: '正常',
          value: '正常'
        },
        {
          label: '关闭',
          value: '关闭'
        }
      ]
    }
  },
  watch: {
    async visible(val) {
      this.$emit('update:showRight', val)
      this.ruleForm.hospitalCode = this.hospitalCode
      if (val) {
        await this.$getHospitalList()
        this.handleChange('hospital')
      }
    },
    showRight(val) {
      this.visible = val
    },
    rowData(val) {
      if (val) {
        this.ruleForm = JSON.parse(JSON.stringify(val))
      }
    },
    hospitalCode: {
      handler(val) {
        if (val && this.visible) {
          this.ruleForm.hospitalCode = val
          this.handleChange('hospital')
        }
      },
      immediate: true
    }
  },
  computed: {},
  methods: {
    async getAllListData() {
      try {
        await this.getDepAreaOptions()
        this.getDepartment()
        this.getDepOptions()
        this.getModalityOptions()
        this.getCheckGroupOptions()
      } catch (err) {
        console.log(err)
      }
    },
    handleClose() {
      this.$emit('update:showRight', false)
      this.handleCancel()
    },
    handleCancel() {
      // 关闭弹窗
      this.$emit('update:rowData', null)
      this.handleReset()
    },
    handleConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.curStatus === this.pageStatus.add) {
            /* 新增保存 */
            this.addSave()
          } else {
            /* 编辑保存 */
            this.editSave()
          }
        }
      })
    },
    handleReset() {
      /* 重置 */
      let data = {
        hospitalCode: this.$store.state.user.hospitalCode,
        depArea: '',
        department: '',
        dep: '',
        modality: '',
        checkGroup: '',
        checkRoom: '',
        checkRoomState: '正常',
        aeTitle: '',
        modalityAddress: '',
        remark1: ''
      }
      this.ruleForm = Object.assign(this.ruleForm, data)
    },
    delete() {
      /* 删除 */
      this.$confirm('此操作将永久删除该机房, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteData()
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    deleteData() {
      deleteCheckroom({ id: this.ruleForm.id }).then((res) => {
        if (res.code === 10000) {
          this.$message.success('删除成功')
          this.handleClose()
          this.refresh()
        }
      })
    },
    refresh() {
      this.getAllListData()
      this.$emit('refresh')
    },
    addSave() {
      /* 新增保存 */
      this.loading = true
      let hospital = this.mx_hospitalList.find((e) => {
        return e.code === this.ruleForm.hospitalCode
      })
      let data = {
        ...this.ruleForm,
        hospitalName: hospital.name
      }
      addCheckroom(data).then((res) => {
        this.loading = false
        if (res.code === 10000) {
          this.$message.success('保存成功')
          this.visible = false
          this.refresh()
        }
      }).catch(() => {
        this.loading = true
      })
    },
    editSave() {
      /* 编辑保存 */
      this.loading = true
      let hospital = this.mx_hospitalList.find((e) => {
        return e.code === this.ruleForm.hospitalCode
      })
      let data = {
        ...this.ruleForm,
        hospitalName: hospital.name
      }
      editCheckroom(data).then((res) => {
        this.loading = false
        if (res.code === 10000) {
          this.$message.success('保存成功')
          this.visible = false
          this.refresh()
        }
      }).catch(() => {
        this.loading = true
      })
    },
    handleCommand(command) {
      switch (command) {
        case 'reset':
          this.handleReset()
          break
        case 'delete':
          this.delete()
          break
        default:
          break
      }
    },
    getDepAreaOptions() {
      getDepAreaList({ hospitalCode: this.ruleForm.hospitalCode }).then(res => {
        if (res.code === 10000) {
          this.depAreaOptions = res.content.list
        }
      })
    },
    getDepOptions() {
      getDepList({ hospitalCode: this.ruleForm.hospitalCode }).then(res => {
        if (res.code === 10000) {
          this.depOptions = res.content.list
        }
      })
    },
    getModalityOptions() {
      getModalityList({ hospitalCode: this.ruleForm.hospitalCode }).then(res => {
        if (res.code === 10000) {
          this.modalityOptions = res.content.list
        }
      })
    },
    getDepartment() {
      let data = {
        HospitalCode: this.ruleForm.hospitalCode,
        DepArea: this.ruleForm.depArea,
        type: '科室'
      }
      getItemList(data).then(res => {
        if (res && res.code === 10000) {
          this.departmentOptions = res.content.list.map(_item => _item.item)
        }
      })
    },
    getCheckGroupOptions() {
      let data = {
        HospitalCode: this.ruleForm.hospitalCode,
        dep: this.ruleForm.dep
      }
      getCheckGroupList(data).then(res => {
        if (res && res.code === 10000) {
          this.groupOptions = res.content.list
        }
      })
    },
    handleChange(val) {
      switch (val) {
        case 'hospital':
          this.depAreaOptions = []
          this.depOptions = []
          this.modalityOptions = []
          this.departmentOptions = []
          this.groupOptions = []

          this.ruleForm.depArea = ''
          this.ruleForm.department = ''
          this.ruleForm.dep = ''
          this.ruleForm.modality = ''
          this.ruleForm.checkGroup = ''
          this.getAllListData()
          break
        case 'depArea':
          this.ruleForm.department = ''
          this.ruleForm.dep = ''
          this.ruleForm.modality = ''
          this.ruleForm.checkGroup = ''
          this.getDepartment()
          this.getDepOptions()
          this.getModalityOptions()
          this.getCheckGroupOptions()
          break
        case 'department':
          this.ruleForm.dep = ''
          this.ruleForm.modality = ''
          this.ruleForm.checkGroup = ''
          this.getDepOptions()
          this.getModalityOptions()
          this.getCheckGroupOptions()
          break
        case 'dep':
          this.ruleForm.modality = ''
          this.ruleForm.checkGroup = ''
          this.getModalityOptions()
          this.getCheckGroupOptions()
          break
        default:
          break
      }
    },
    addChildren() {
      let data = {
        name: '',
        code: ''
      }
      this.ruleForm.childrenList.push(data)
    },
    deleteChild(index) {
      this.ruleForm.childrenList.splice(index, 1)
    }
  },
  beforeDestroy() {},
  destroyed() {},
  beforeUpdate() {},
  updated() {}
}
</script>
<style lang='scss' scoped>
.col-right{
        border-left: 1px solid #e5e5e5;
        padding: 0px 20px 37px;
        color: #606266;
        // width:640px;
        background-color: #FFFFFF;
        // float:right;
        .short-input{
            width: 200px;
            margin-right: 19px!important;
            .el-input{
                width: 200px;
            }
        }
        .describe-input{
            width: 350px;
            .el-input{
                width: 350px;
            }
        }
        .name{
            font-weight: bold;
        }
        .el-form--inline .el-form-item{
            margin-right:0px
        }
        .buttons{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                background: #fff;
                padding: 5px 25px;
                border-top: 1px solid #E5E7EC;
            /deep/ .el-form-item__content{
                width:100%
            }
            .right-buttons{
                float:right
            }
            .el-dropdown{
                color: #00c0ef;
            }
        }
        .cursor{
            cursor: pointer;
        }
        .child-icon{
            line-height: 40px;
        }
        .icon{
            margin-left: 4px;
        }
        .blue-text{
            color:#1890FF
        }
        .children-form{
            width: 100%;
            /deep/ .el-form-item__content{
                width: 100%;
                .child-list{
                    padding:10px;
                    background: #F3F6FB;
                    .child-title{
                        font-size: 12px;
                    }
                    .one-child{
                        display: flex;
                        justify-content: space-evenly;
                    }
                }
            }
        }
        .children-form /deep/ .el-input--small{
            width:185px
        }
    }
</style>
